<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :sm="4" >
        <el-scrollbar style="height: 500px; font-size:12px; border: 0px solid rgba(144,147,153,.5);">
          <!-- 组织树 -->
          <el-tree
            v-loading="loading"
            ref="tree"
            :data="jsonTree"
            :expand-on-click-node="false"
            :default-expanded-keys="['01']"
            node-key="id"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node" @click="handleNodeClick(data)">
              <span>{{ node.data.text }}</span>
            </span>
          </el-tree>
        </el-scrollbar>
      </el-col>
      <el-col :sm="20">

        <div v-show="active === 1">
          <!--<div class="searchform">-->
          <!--&lt;!&ndash; 查询条件 &ndash;&gt;-->
          <!--<el-form :inline="true" :model="search" ref="searchForm" size="mini" label-width="100px">-->
          <!--<el-form-item prop="orgId" label="上级部门">-->
          <!--<companyOrgSelect @getComOrgTree="getComOrgTree" v-model="search.orgName" :ORG_ID.sync="search.orgId"-->
          <!--:ORG_NAME="search.orgName" class="search-input"/>-->
          <!--</el-form-item>-->
          <!--<br>-->
          <!--<div style="text-align:center">-->
          <!--<el-form-item>-->
          <!--<el-button type="primary" icon="el-icon-search" @click="searchHandle">查询-->
          <!--</el-button>-->
          <!--</el-form-item>-->
          <!--<el-form-item>-->
          <!--<el-button icon="el-icon-refresh" @click="reset">重置-->
          <!--</el-button>-->
          <!--</el-form-item>-->
          <!--</div>-->
          <!--</el-form>-->
          <!--</div>-->

          <div v-show="orgType != 16801003" class="table">
            <div class="tableHead">
              <div class="tabletitle">组织信息</div>
              <div class="btnGroup">
                <el-button-group>
                  <el-button icon="el-icon-plus" type="primary" @click="add">新增</el-button>
                </el-button-group>
              </div>
            </div>
            <BaseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle">
              <el-table-column
                fixed="left"
                label="序号"
                type="index"
                min-width="50"/>
              <el-table-column align="center" label="操作" min-width="50">
                <template slot-scope="scope">
                  <el-tooltip class="item" content="编辑" placement="bottom">
                    <el-button
                      type="text"
                      style="font-size: 20px;"
                      icon="el-icon-edit-outline"
                      @click="edit(scope.row)"/>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="ORG_NAME" label="组织名称" min-width="100" show-overflow-tooltip/>
              <el-table-column prop="ORG_CODE" label="组织区分" min-width="100"/>
              <el-table-column :formatter="filterCode" prop="ORG_TYPE" label="组织类型" type="1680"/>
              <el-table-column :formatter="filterCode" prop="BUSI_TYPE" label="业务类型" type="1660"/>
              <!-- <el-table-column :formatter="filterCode" prop="AREA_NAME" label="业务范围"/> -->
              <el-table-column prop="PARENT_ORG_NAME" label="上级部门" min-width="150" show-overflow-tooltip/>
              <el-table-column prop="SORT" label="排序" min-width="80"/>
              <el-table-column :formatter="filterCode" prop="STATUS" label="状态" min-width="100" type="1001"><!---->
              </el-table-column>
            </BaseTable>
          </div>

          <div v-show="orgType === 16801003" class="table">
            <div class="tableHead">
              <div class="tabletitle">网点信息</div>
              <!--<div class="btnGroup">-->
              <!--<el-button-group>-->
              <!--<el-button icon="el-icon-plus" type="primary" @click="add">新增</el-button>-->
              <!--</el-button-group>-->
              <!--</div>-->
            </div>
            <el-table :data="dealerData">
              <el-table-column label="序号" type="index" min-width="50"/>
              <!--<el-table-column align="center" label="操作" min-width="30">-->
              <!--<template slot-scope="scope">-->
              <!--<el-tooltip class="item" content="编辑" placement="bottom">-->
              <!--<el-button type="text" style="font-size: 20px;" icon="el-icon-edit-outline"-->
              <!--@click="edit(scope.row)"></el-button>-->
              <!--</el-tooltip>-->
              <!--</template>-->
              <!--</el-table-column>-->
              <el-table-column prop="DEALER_NAME" label="网点名称" min-width="100" show-overflow-tooltip/>
              <el-table-column prop="DEALER_CODE" label="网点代码"/>
              <el-table-column :formatter="filterCode" prop="DATA_TYPE" label="网点类型" type="4508"/>
              <el-table-column :formatter="filterCode" prop="D_TYPE" label="网点种类" type="5010"/>
            </el-table>
          </div>

        </div>
        <!-- 新增div -->
        <div v-if="active == 2">
          <div class="searchform">
            <el-form
              ref="addSearchForm"
              :inline="true"
              :model="addSearch"
              :rules="rules"
              size="mini"
              label-width="90px">
              <el-form-item prop="orgCode" label="组织代码">
                <el-input v-model="addSearch.orgCode" placeholder="组织代码" class="search-input" clearable/>
              </el-form-item>
              <el-form-item prop="orgName" label="组织名称">
                <el-input v-model="addSearch.orgName" placeholder="组织名称" class="search-input" clearable/>
              </el-form-item>
              <el-form-item prop="orgType" label="组织类型">
                <r-select
                  v-model="addSearch.orgType"
                  :formatter="filterCode"
                  :exclude-code="excludeCode"
                  class="search-input"
                  placeholder="请选择"
                  type="1680"/>
              </el-form-item>
              <el-form-item prop="busiType" label="业务类型">
                <r-select
                  v-model="addSearch.busiType"
                  :formatter="filterCode"
                  class="search-input"
                  placeholder="请选择"
                  type="1660"/>
              </el-form-item>

              <el-form-item prop="parentOrgName" label="上级组织">
                <el-input v-model="addSearch.parentOrgName" placeholder="请选择" class="search-input" readonly/>
              </el-form-item>
              <el-form-item prop="status" label="组织状态">
                <r-select
                  v-model="addSearch.status"
                  :formatter="filterCode"
                  class="search-input"
                  placeholder="请选择"
                  type="1001"/>
              </el-form-item>
              <el-form-item prop="sort" label="排序">
                <el-input v-model="addSearch.sort" placeholder="排序" class="search-input" clearable/>
              </el-form-item>
              <el-form-item prop="remark" label="备注">
                <el-input v-model="addSearch.remark" placeholder="备注" class="search-input" clearable/>
              </el-form-item>
            </el-form>
          </div>
          <div style="text-align:center">
            <el-button type="primary" @click="addSave">保存</el-button>
            <el-button @click="clear">返回</el-button>
          </div>
        </div>
        <!-- 编辑div -->
        <div v-if="active === 3">
          <div class="searchform">
            <el-form
              ref="editSearchForm"
              :inline="true"
              :model="editSearch"
              :rules="rules"
              size="mini"
              label-width="80px">
              <el-form-item prop="orgCode" label="组织代码">
                <el-input v-model="editSearch.orgCode" placeholder="组织代码" class="search-input" disabled/>
              </el-form-item>
              <el-form-item prop="orgName" label="组织名称">
                <el-input v-model="editSearch.orgName" placeholder="组织名称" class="search-input" clearable/>
              </el-form-item>
              <el-form-item prop="orgType" label="组织类型">
                <r-select
                  v-model="editSearch.orgType"
                  :exclude-code="excludeCode"
                  :formatter="filterCode"
                  class="search-input"
                  placeholder="请选择"
                  type="1680" />
              </el-form-item>

              <el-form-item prop="busiType" label="业务类型">
                <r-select
                  v-model="editSearch.busiType"
                  :formatter="filterCode"
                  class="search-input"
                  placeholder="请选择"
                  type="1660"/>
              </el-form-item>
              <!-- v-if="editSearch.orgType !== 16801001" -->
              <el-form-item prop="parentOrgId" label="上级组织">
                <el-input v-model="editSearch.parentOrgName" placeholder="请选择" class="search-input" readonly/>
              </el-form-item>
              <el-form-item v-if="false" prop="parentOrgId">
                <el-input v-model="editSearch.parentOrgId"/>
              </el-form-item>
              <el-form-item prop="status" label="组织状态">
                <r-select
                  v-model="editSearch.status"
                  :formatter="filterCode"
                  class="search-input"
                  placeholder="请选择"
                  type="1001"/>
              </el-form-item>
              <el-form-item prop="sort" label="排序">
                <el-input v-model="editSearch.sort" placeholder="排序" class="search-input" clearable/>
              </el-form-item>
              <el-form-item prop="remark" label="备注">
                <el-input v-model="editSearch.remark" placeholder="备注" class="search-input" clearable/>
              </el-form-item>
            </el-form>
          </div>
          <div style="text-align:center">
            <el-button type="primary" @click="editSave">保存</el-button>
            <el-button @click="clear">返回</el-button>
          </div>

        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getJsonTree } from '@/utils/index'
import {
  getComOrgList,
  getComOrgTreeList,
  saveComOrgList,
  editSaveComOrgList,
  getParentOrgList,
  getOrgDealerList
} from '@/api/admin/org/gms/companyOrgManage'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import filtercode from '@/components/Checkbox/filtercode'
import companyOrgSelect from './companyOrgSelect'
import rSelect from '@/components/Select/Select'
import _ from 'lodash'
import {
  mapGetters
} from 'vuex'
import { systemCode } from '@/utils/validator'

export default {
  name: 'GmsCompanyOrgManage',
  components: {
    BaseTable,
    filtercode,
    companyOrgSelect,
    rSelect
  },
  mixins: [formMixins],
  data() {
    return {
      tree: [],
      loading: false,
      active: 1,
      excludeCode: '',
      form: {},
      list: [],
      load: true,
      page: {},
      dealerData: [],
      orgType: 16801001,
      areaTypeDisabled: false,
      multipleSelection: [],
      returnList: [],
      parentOrg: [],
      search: {
        limit: 10,
        pageNum: 1,
        orgName: '',
        orgId: ''
      },
      addSearch: {
        orgCode: '',
        orgName: '',
        parentOrgId: '',
        parentOrgName: '',
        status: '',
        orgType: '',
        busiType: '',
        areaType: '',
        remark: '',
        sort: '',
        pId: ''
      },
      editSearch: {
        orgId: '',
        orgCode: '',
        orgName: '',
        parentOrgName: '',
        parentOrgId: '',
        status: '',
        orgType: '',
        remark: '',
        sort: '',
        pId: ''
      },
      rules: {
        orgCode: [{
          required: true,
          message: '请输入组织代码',
          trigger: 'blur'
        },
        { trigger: 'blur', validator: systemCode }
        ],
        orgName: [{
          required: true,
          message: '请输入组织名称',
          trigger: 'blur'
        }],
        orgType: [{
          required: true,
          message: '请输入组织类型',
          trigger: 'blur'
        }],
        busiType: [{
          required: true,
          message: '请输入业务类型',
          trigger: 'blur'
        }],
        /* areaType: [{
          required: true,
          message: '请输入业务范围',
          trigger: 'blur'
        }],*/
        parentOrgName: [{
          required: true,
          message: '请选择上级组织',
          trigger: 'blur'
        }],
        sort: [{
          required: true,
          message: '请填写排序',
          trigger: 'blur'
        }]
      }
    }
  },
  // userInfo用户信息systemParam系统参数
  computed: {
    ...mapGetters(['userInfo', 'systemParam']),
    jsonTree() {
      this.tree.forEach(el => (el.label = el.text))
      this.tree.forEach(el => (el.parentId = el.parent))
      return getJsonTree(this.tree)
    }
  },
  mounted() {
    this.searchTree()
    this.searchHandle()
  },
  methods: {
    // 查询
    searchTree(params) {
      this.loading = true
      getComOrgTreeList(params)
        .then(res => {
          // this.deleteRes(res)
          this.loading = false
          this.tree = res
        })
        .catch(err => {
          this.loading = false
        })
    },
    // 选择数据
    handleNodeClick(data) {
      // this.ORG_NAME = data.orgName
      // this.list = data
      this.orgType = data.orgType || ''
      if (this.active === 1) {
        if (data.orgType === 16801003) {
          this.searchDealer(data.orgId)
        } else {
          this.search.orgId = data.orgId
          this.searchHandle()
        }
      } else if (this.active === 2) {
        this.addSearch.parentOrgName = data.orgName
        this.addSearch.parentOrgId = data.orgId
        this.addSearch.orgType = ''
        this.addSearch.areaType = data.areaType || ''
        this.areaTypeDisabled = true
        this.addSearch.pId = data.pId
        if (data.orgType === 16801003) { // 选择分公司，则显示管辖经销商
          this.active = 1
        }
      } else if (this.active === 3) {
        this.editSearch.parentOrgName = data.orgName
        this.editSearch.parentOrgId = data.orgId
        this.editSearch.orgType = ''
        this.editSearch.areaType = data.areaType || ''
        if (data.orgType === 16801003) { // 选择分公司，则显示管辖经销商
          this.active = 1
        }
      }
    },
    searchDealer(orgId) {
      getOrgDealerList({
        orgId
      }).then(res => {
        this.dealerData = res
      })
    },
    searchHandle() {
      const table = this.$refs['table']
      const search = _.extend(this.search)
      getComOrgList(search).then(res => {
        table.complete().filData(res)
      }).catch(err => {
        table.complete()
      })
    },
    ParentOrgChange() {
      // let orgType = this.addSearch.orgType;
      // if(this.addSearch.orgType === "" || this.addSearch.orgType === null){
      //   orgType = 0
      // }
      const params = {
        orgType: this.addSearch.orgType
      }
      getParentOrgList(params).then(res => {
        this.parentOrg = res
      })
    },
    // 新增
    add() {
      this.active = 2
      this.$nextTick(() => {
        this.$refs.addSearchForm.clearValidate()
        this.addSearchForm = {}
      })
      this.addSearch.status = 10011001
      // this.addSearch.orgType = 16801002;
    },
    // 编辑
    edit(data) {
      this.active = 3
      this.$nextTick(() => {
        this.$refs.editSearchForm.clearValidate()
        this.editSearchForm = {}
      })
      this.editSearch.orgId = data.ORG_ID
      this.editSearch.parentOrgId = data.PARENT_ORG_ID
      this.editSearch.parentOrgName = data.PARENT_ORG_NAME
      this.editSearch.orgCode = data.ORG_CODE
      this.editSearch.orgName = data.ORG_NAME
      this.editSearch.remark = data.REMARK
      this.editSearch.status = data.STATUS
      this.editSearch.orgType = data.ORG_TYPE
      this.editSearch.busiType = data.BUSI_TYPE
      this.editSearch.areaType = data.AREA_TYPE
      this.editSearch.sort = data.SORT
      const params = {
        orgType: this.editSearch.orgType
      }
      getParentOrgList(params).then(res => {
        this.parentOrg = res
      })
    },
    getComOrgTree(val) {
      this.$set(this.search, 'orgId', val.orgId)
      this.$set(this.addSearch, 'parentOrgId', val.orgId)
      this.$set(this.editSearch, 'parentOrgId', val.orgId)
      this.$set(this.search, 'orgName', val.orgName)
    },
    reset() {
      this.search.orgName = ''
      this.search.orgId = ''
      this.searchHandle()
    },
    // 保存
    addSave() {
      this.$refs['addSearchForm'].validate((valid) => {
        if (valid) {
          // let dto = {
          //   orgCode: this.addSearch.orgCode,
          //   orgName: this.addSearch.orgName,
          //   parentOrgId: this.addSearch.parentOrgId,
          //   status: this.addSearch.status,
          //   orgType: this.addSearch.orgType,
          //   remark: this.addSearch.remark
          // };

          saveComOrgList(this.addSearch).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })
            this.active = 1
            this.searchTree()
            this.searchHandle()
            this.addSearch = {
              orgCode: '',
              orgName: '',
              parentOrgId: '',
              parentOrgName: '',
              status: '',
              orgType: '',
              busiType: '',
              areaType: '',
              remark: '',
              sort: '',
              pId: ''
            }
          }).catch(err => {
          })
        }
      })
    },
    // 编辑保存
    editSave() {
      this.$refs['editSearchForm'].validate((valid) => {
        if (valid) {
          const orgId = this.editSearch.orgId

          if (orgId === this.editSearch.parentOrgId) {
            this.$message({ type: 'warning', message: '不能选择自己做为上级组织。' })
            return
          }

          editSaveComOrgList(orgId, this.editSearch).then(res => {
            this.$message({
              type: 'success',
              message: '保存成功!'
            })

            this.active = 1
            this.searchTree()
            this.searchHandle()
            this.editSearch = {
              orgId: '',
              orgCode: '',
              orgName: '',
              parentOrgName: '',
              parentOrgId: '',
              status: '',
              orgType: '',
              remark: '',
              sort: ''
            }
          }).catch(err => {
          })
        }
      })
    },
    // 返回清空列表
    clear() {
      this.active = 1
      this.addSearch = {
        orgCode: '',
        orgName: '',
        parentOrgId: '',
        parentOrgName: '',
        status: '',
        orgType: '',
        busiType: '',
        areaType: '',
        remark: '',
        sort: '',
        pId: ''
      }
      this.editSearch = {
        orgId: '',
        orgCode: '',
        orgName: '',
        parentOrgName: '',
        parentOrgId: '',
        status: '',
        orgType: '',
        remark: '',
        sort: '',
        pId: ''
      }
    }
  }
}

</script>

<style scoped>
  .el-row {
    display: block !important;
  }
</style>
